package myJs.cps

import com.softwaremill.quicklens._
import monocle.Lens
import monocle.macros._
import myJs.Implicits._
import myJs.myPkg.jquery._
import myJs.Utils._
import myJs.map.GeneticMap
import myJs.tool.Tool
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._

import scala.scalajs.js.Dynamic.{global => g}
import scala.collection.immutable.SeqMap
import slinky.web.html._

/**
 * Created by yz on 3/11/2020
 */
@react object MyTabCp {

  type Props = Unit

  val component = FunctionalComponent[Props] { props =>

    val (selectI, setSelectI) = useState(0)
    val indexs = (1 to 9).toList.map(_.toString)
    val initLgs = indexs.map(x => s"LG01")
    val (lgs, setLgs) = useState(initLgs)

    object FTool {

      def tabChange(i: Int) = () => {
        setSelectI(i)
      }

      def lgsChange(curI: Int) = (v: String) => {
        setLgs(lgs.updated(curI, v))
      }

    }

    useEffect(() => {
      GeneticMap.initTables(indexs, "LG01")
      GeneticMap.initSummaryTables(indexs)
    }, List()
    )

    useEffect(() => {
      GeneticMap.refreshTable(index = indexs(selectI), lgs(selectI))
    }, List(lgs)
    )


    val lgsMap = (1 to 14).map { x =>
      if (x < 10) s"0${x}" else x.toString
    }.map(x => s"LG${x}").toList.optionMap

    div(
      ul(className := "nav nav-tabs myMainUl",
        indexs.zipWithIndex.map { case (index, i) =>
          val clsStr = if (i == selectI) "active" else ""
          li(key:=s"${index}",(className := s"${clsStr}"), onClick := FTool.tabChange(i),
            a(href := s"#map${index}", data - "toggle" := "tab", s"Map ${index}")
          )
        }
      ),
      div(className := "tab-content",
        indexs.zipWithIndex.map { case (index, curI) =>
          val summaryTitle = index match {
            case "1" => "Map 1 Summary of Self SNP"
            case "2" => "Map 2 Summary of 741 Maternal SNP & Dom (741xA4)"
            case "3" => "Map 3 Summary of 741 Maternal SNP &Dom (741xA268)"
            case "4" => "Map 4 Summary of 741  Paternal SNP & Dom (A268x741)"
            case "5" => "Map 5 Summary of A4 Paternal SNP &Dom (741xA4)"
            case "6" => "Map 6 Summary of A268 Paternal SNP &Dom (741xA268)"
            case "7" => "Map 7 Summary of A268 Maternal SNP &Dom (A268x741))"
            case "8" => "Map 8 Integrated 741 Map"
            case "9" => "Map 9 Summary of A268 Integrated"
          }
          val myClass = if (curI == selectI) "tab-pane fade in active" else "tab-pane"
          div(key:=s"${index}",style := Style(marginTop = "20px"), className := s"${myClass}", id := s"map${index}",
            div(className := "row",
              div(style := Style(borderRight = "1px solid #dddddd"), className := "col-sm-6",
                h4("Linkage map:"),
                img(src := s"/assets/images/map_${index}.png", width := "100%")
              ),
              div(className := "col-sm-6",
                h4(s"${summaryTitle}:"),
                table(style := Style(wordWrap = "break-word"), id := "summaryTable", className := "table table-hover table-bordered"),
              ),
            ),
            hr(),
            h4("select the grouping data that you want to display:"),
            div(id := "toolbar",
              div(style := Style(width = "100px"), className := "form-group",
                PureSelectCp(name = "lg", optionMap = lgsMap, value = lgs(curI), onChange = FTool.lgsChange(curI))
              )
            ),
            table(style := Style(wordWrap = "break-word"), id := "table", className := "table table-hover table-bordered"),
          )
        }
      )

    )

  }

}



